This repository has been archived by the owner on Mar 27, 2021. It is now read-only.
Set a displayName on the provider component for easier debugging with React Devtools #501
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary & motivation
Duplicate Feature of a PR I just made for @stripe/react-stripe-js stripe/react-stripe-js#30
Simple change to make debugging with React DevTools a little bit easier by having a non-generic displayName. Also a component namespace that closer matches the import.
In the devtools window the "StripeProvider" component currently shows up as
<Provider>this change would make it show up as <Stripe.Provider> With the generic name of "provider" it can be a little annoying debugging if you have multiple providers all with the same generic displayName.Also this attempts to remove some confusion with the
import { StripeProvider } from 'react-stripe-elementsshowing up asProviderin the component tree and any associated warnings that React now throws for 17.* compatibility.before
after
If you're unfamiliar with the context displayName documentation is here: https://reactjs.org/docs/react-component.html#displayname
My real motivation for this is an issue with a project that has multiple generic named "Provider" components and I was tracking the following a warning down:
After a little bit of digging realized it was related to
react-stripe-elementsas it has a context provider just named<Provider>even though the import is<StripeProvider>Testing & documentation
Use React DevTools to confirm that the "correct" displayName is present.